<script lang="tsx">
import { defineComponent, computed, ref, useAttrs } from 'vue'
let key = 0
export default defineComponent({
  props: {
    data: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
  setup(props, { expose }) {
    const attrs = useAttrs()

    const getTableColumn = (column: any) => {
      const { render, headerRender, children, ...data } = column
      // 处理自定义头部和自定义内容
      const slots: any = {}
      if (headerRender) {
        slots.header = headerRender
      }
      if (render) {
        slots.default = render
      }
      if (children) {
        slots.default = () => children.map(getTableColumn)
      }
      if (!column.prop && !column.type) {
        key += 1
      }
      const columnProps = { align: 'center', ...data }
      return (
        <el-table-column
          key={column.prop || column.type || key}
          {...columnProps}
          v-slots={slots}
        ></el-table-column>
      )
    }

    const tableColumns = computed(() => props.columns.map(getTableColumn))

    const tableRef = ref(null)

    expose({
      tableRef,
    })

    return () => (
      <el-table ref={tableRef} data={props.data} {...attrs}>
        {tableColumns.value}
      </el-table>
    )
  },
})
</script>
